<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./css/element.css"/>
    <style>
        html, body {
            margin: 0;
        }

        #app {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 50px;
            overflow: hidden;
        }

        .main {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 50px;
            overflow: hidden;
            padding: 150px 0;
            box-sizing: border-box;
        }

        .card {
            width: 100%;
            padding: 16px;
            box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
            box-sizing: border-box;
            margin-bottom: 12px;
        }

        .card .title {
            font-size: 24px;
            font-weight: 600;
            color: #1f1f1f;
            margin-left: 10px;
        }

        p {
            padding: 0 20px;
            margin: 0 auto;
        }

        .bottom {
            position: fixed;
            padding: 5px 20px;
            bottom: 10px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            gap: 10px;
            box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
        }
    </style>
</head>
<body>

<div id="app" v-loading="isUpload">
    <input type="file" id="file" style="display: none"
           @change="onChange"/>
    <div class="main" v-if="files.length === 0">
        <img src="/assets/upload.png" style="width: 236px;height: 175px;" alt="上传">
        <p>支持上传doc、docx、pdf、jpg、jpeg、png、excel、ppt格式文件</p>
        <el-button type="primary" plain @click="upload">选择本地文件打印</el-button>
    </div>

    <div class="main" style="justify-content: flex-start;padding: 10px 20px;box-sizing: border-box" v-else>
        <div class="card" v-for="(item,index) in files" :key="index">
            <span class="title">{{ item.name }}</span>
            <div style="height: 16px"></div>
            <el-form ref="form" :model="item" label-width="80px">
                <el-form-item label="打印份数">
                    <el-input-number v-model="item.printNumber" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="单双面">
                    <el-radio v-model="item.isDouble" :label="true" border>双面</el-radio>
                    <el-radio v-model="item.isDouble" :label="false" border>单面</el-radio>
                </el-form-item>
                <el-form-item label="色彩">
                    <el-radio v-model="item.isColor" :label="true" border>彩色</el-radio>
                    <el-radio v-model="item.isColor" :label="false" border>黑白</el-radio>
                </el-form-item>
            </el-form>
        </div>

        <div class="bottom">
            <el-button plain @click="upload">继续添加</el-button>
            <el-button type="primary" plain @click="onSure">确认提交</el-button>
        </div>

    </div>

</div>

<script src="./framework/vue.js"></script>
<script src="./framework/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                centerDialogVisible: false,
                files: [],
                form: {},
                token: '',
                baseUrl: '',
                mac: '',
                isUpload: false
            };
        },
        mounted() {
            // 获取路径上带的参数
            const query = new URLSearchParams(window.location.search);
            this.token = query.get('token');
            this.baseUrl = query.get('baseUrl');
            this.mac = query.get('mac');
            console.log(this.token, this.baseUrl, this.mac);
        },
        methods: {
            upload() {
                document.getElementById('file').click();
            },
            onChange(e) {
                // // e.target.files[0]变成File对象，以便后面上传
                if (e.target.files[0].length === 0) {
                    return;
                }

                // 判断文件类型，如果不是doc、docx、pdf、jpg、jpeg、png、excel、ppt，禁止上传
                const fileName = e.target.files[0].name;
                const fileType = fileName.split('.')[1];
                if (fileType !== 'doc' && fileType !== 'docx' && fileType !== 'pdf' && fileType !== 'jpg' && fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'xls' && fileType !== 'xlsx' && fileType !== 'ppt' && fileType !== 'pptx') {
                    this.$message.warning('不支持的文件格式');
                    return;
                }

                // 上传文件不能大于5M
                if (e.target.files[0].size > 15 * 1024 * 1024) {
                    this.$message.warning('上传文件不能大于15M');
                    return;
                }

                const formData = new FormData();
                formData.append('file', e.target.files[0]);

                const fileData = {
                    name: e.target.files[0].name,
                    printNumber: 1,
                    isDouble: false,
                    isColor: false,
                    file: formData
                }

                this.files.push(fileData)
            },
            onSure() {
                this.uploadFiles()
            },
            uploadFiles() {
                this.isUpload = true
                const that = this
                const queryData = []
                const uploadPromises = this.files.map(i => {
                    return fetch(this.baseUrl + '/api/v1.0/fileDetail/upload', {
                        method: 'POST',
                        body: i.file
                    })
                        .then(response => response.json())
                        .then(res => {
                            if (res.code === 200) {
                                const data = {
                                    ossAddress: res.data.url,
                                    numberOfPrints: i.printNumber,
                                    selectPrintColor: i.isColor ? 2 : 1,
                                    chooseSingleOrDoubleSided: i.isDouble ? 2 : 1,
                                    mac: this.mac,
                                    fileName: i.name,
                                    printStartRange: 1,
                                    printEndRange: res.data.thMetadata.numberOfPages,
                                    type: 'file'
                                }
                                queryData.push(data)
                            }
                        });
                });

                Promise.all(uploadPromises).then(() => {
                    // 假设 queryData 已经准备好了
                    fetch(this.baseUrl + '/api/v1.0/oss/saveBatch', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'fate-token': this.token
                        },
                        body: JSON.stringify(queryData) // 将 queryData 转换为 JSON 字符串
                    })
                        .then(response => response.json())
                        .then(res => {
                            if (res.code === 200) {
                                console.log('批量新增成功:', res.data);
                                that.$message.success('上传成功');
                            } else {
                                console.error('批量新增失败:', res.msg);
                                that.$message.error('上传失败：' + res.msg);
                            }

                            that.isUpload = false
                            that.files = []
                        })
                        .catch(error => {
                            console.error('请求出错:', error);
                        });

                });
            }
        }
    })
</script>
</body>
</html>